<template>
    <transition name="slide-right">
        <div class="body main_page" @mousewheel="scrollFunc(false)">
            <!--<img class="bgimg" src='@/assets/img/raw_1536733888.png'/>-->
            <div class="dapp-title">
                <span class="mui-icon mui-icon-back" @click="changeRoute('/index/dapp')"></span>
                <span>{{ $t('m.sicbo.board.board[6]') }}</span>
                <span></span>
            </div>
            <div style="margin-top: 15px;margin-left: calc(50% - 10px);width: 20px;height: 20px;position: fixed;top: 65px;"
                 data-loader="ball-pulse" v-show="showPullingDown"></div>
            <div class="content wrapper">
                <div class="maincontent">
                    <div class="assets_panel">
                        <p class="roundInfoDice">
                            Round#{{ round.id - 1 }} {{ $t('m.sicbo.board.board[0]') }}
                        </p>
                        <div class="luckDice">
                            <div :class="'dice dice_' + round.num1">
                                <div :class="'dicePoint point_'+v" v-for="(v,k) in round.num1" :key="k"></div>
                            </div>
                            <div :class="'dice middle dice_' + round.num2">
                                <div :class="'dicePoint point_'+v" v-for="(v,k) in round.num2" :key="k"></div>
                            </div>
                            <div :class="'dice dice_' + round.num3">
                                <div :class="'dicePoint point_'+v" v-for="(v,k) in round.num3" :key="k"></div>
                            </div>
                            <div style="clear: both;"></div>
                        </div>
                        <div class="timeInfo">
                            <span>Round#{{ round.id.toString() }}</span>
                            <span class="round" v-if="round.time > 0"> {{ $t('m.sicbo.board.board[1]') }}</span>
                            <span class="time_show" v-if="lCD.time > 0"> {{ lCD.m + ":" + lCD.s }}</span>
                            <span class="time_show" v-else> {{ $t('m.sicbo.board.board[2]') }}</span>
                            <span class="with" v-if="round.lastTime > 0">&nbsp;{{ $t('m.sicbo.board.board[5]') }}</span>
                        </div>
                        <div class="sicbo-balance">{{$t('m.efomo.biling.content.inputBox.text')[3]}}:&nbsp; {{
                            balance.SICBO | roundOff(2) }}
                            ETSC
                        </div>
                    </div>
                    <div class="switch_nav">
                        <ul class="switch_list">
                            <li :class="active=='bet'?'router-link-active':''"
                                @click="changeTab('/dapp/sicbo/bet','bet')">{{ $t('m.sicbo.board.board[3]') }}
                            </li>
                            <li :class="active=='count'?'router-link-active':''"
                                @click="changeTab('/dapp/sicbo/count','count')">{{ $t('m.sicbo.board.board[4]') }}
                            </li>
                        </ul>
                    </div>
                    <router-view></router-view>
                </div>
            </div>
            <Loading></Loading>
            <Prompt></Prompt>
            <Sicbo_explain></Sicbo_explain>
        </div>
    </transition>
</template>
<script>
    import "@/assets/css/sicbo.scss";
    import {getRound} from "@/assets/js/etherjs/sicbo";
    import BScroll from 'better-scroll'
    import {synBalanceOnce} from '@/assets/js/timer/index';

    export default {
        name: 'sicbo_index',
        created() {

        },
        mounted() {
            this.setBottomActive();
            this.getCountDown();
            synBalanceOnce();
            setTimeout(() => {
                this.setScroll();
            }, 200);
        },
        destroyed() {
            console.log("dapp/sicbo/   destroyed");
            this.clearIt()
        },
        data() {
            return {
                active: "",
                showPullingDown: false,
                lCD: {
                    h: "00", m: "00", s: "00", time: ""
                },
                lt: {
                    r: 0, // 定时同步round
                    c: 0  // 定时倒计时
                }
            }
        },
        methods: {
            setScroll: function () {
                let scroll = new BScroll('.wrapper', {
                    scrollY: true,
                    click: true,
                    pullDownRefresh: {
                        threshold: 20, // 下拉距离超过30px触发pullingDown事件
                        stop: 20 // 回弹停留在距离顶部20px的位置
                    },
                    pullUpLoad: {
                        threshold: -10
                    }
                });
                scroll.on("pullingDown", () => {    // 上拉加载
                    this.showPullingDown = true;
                    for (let i in this.$children) {
                        if (this.$children[i].init) {
                            this.$children[i].init().then(() => {
                                this.showPullingDown = false;
                                scroll.finishPullDown();
                                scroll.refresh();
                            });
                        }
                    }
                });
                scroll.on("pullingUp", () => {    // 下拉刷新
                    for (let i in this.$children) {
                        if (this.$children[i].getMore) {
                            this.$children[i].getMore().then((res) => {
                                if (res != 1) {
                                    scroll.refresh();
                                }
                                scroll.finishPullUp();
                            });
                        }

                    }
                });
            },

            getCountDown: async function () {
                await getRound();
                this.getCountDownHelp();
                this.clearIt()
                this.lt.c = setInterval(() => {
                    this.getCountDownHelp();
                }, 1000);
                this.lt.r = setInterval(() => {
                    if (this.lCD.time <= 0) {
                        getRound();
                    }
                }, 5000);
            },

            getCountDownHelp: function () {
                let now = parseInt((new Date().getTime() / 1000).toString());
                let timeL = (this.round.lastTime) > 0 ? (this.round.lastTime - now) : 0;
                let hL = parseInt((timeL / 3600).toString());
                let mL = parseInt(((timeL - 3600 * hL) / 60).toString());
                let sL = parseInt((timeL - 3600 * hL - 60 * mL).toString());

                hL < 10 ? hL = "0" + hL : "";
                mL < 10 ? mL = "0" + mL : "";
                sL < 10 ? sL = "0" + sL : "";

                this.lCD = {
                    h: hL, m: mL, s: sL, time: timeL
                };
            },

            clearIt() {
                if (this.lt.r > 0) clearInterval(this.lt.r);
                if (this.lt.c > 0) clearInterval(this.lt.c);
            },

            changeTab: function (url, path) {
                this.active = path;
                this.changeRoute(url);
            },
            setBottomActive: function () {
                this.active = this.$route.path.match(/\/\w+\/\w+\/(\w+)/)[1];
            },
            synBalanceOnce() {
                synBalanceOnce();
            }
        },
    }
</script>
<style scoped>

</style>